<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    /* 
    ● 直接调用 / 默认绑定: 
      ○  fn()
      ○ 严格模式下是 undefined, 非严格模式下是 window
    ● 通过对象调用 / 隐式绑定: 
      ○ obj.fn()
      ○ 指向调用函数的对象
    ● new 调用 / 构造函数绑定: 
      ○ new fn()
      ○ 指向 new 出来的实例对象
    ● call/apply/bind 方法调用 / 显式绑定: 
      ○ fn.call/apply(obj)
      ○ fn.bind(obj)()
      ○ 指向传入的第一个参数对象 obj
    */
function fn() {
  console.log(this)
}

const obj = {f: fn}

fn()
obj.f()
new fn()

const obj2 = {m: 1}
fn.call(obj2)
fn.apply(obj2)
fn.bind(obj2)()

const obj3 = {
  fn: () => {
    console.log(this)
  }
}
obj3.fn()

  </script>
</body>
</html>